<template>
  <div class="baidu-map-test">
    <div class="test-header">
      <h2>百度地图API测试</h2>
      <button @click="testMap" class="test-btn">测试地图</button>
      <button @click="clearMap" class="clear-btn">清除地图</button>
    </div>
    
    <div class="test-info">
      <p>API密钥: {{ AK }}</p>
      <p>状态: {{ status }}</p>
      <p>错误信息: {{ errorMessage }}</p>
    </div>
    
    <div id="test-map-container" class="test-map-container"></div>
    
    <div class="debug-info">
      <h3>调试信息</h3>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const status = ref('未开始')
const errorMessage = ref('')
const debugInfo = ref('')
let map: any = null

const AK = 'JejBYDSsA76GlOH5xNMJmAjXghFPbdYA'

const addDebugInfo = (info: string) => {
  debugInfo.value += new Date().toLocaleTimeString() + ': ' + info + '\n'
}

const testMap = async () => {
  try {
    status.value = '开始测试'
    addDebugInfo('开始测试百度地图API')
    
    // 清除现有地图
    const container = document.getElementById('test-map-container')
    if (container) {
      container.innerHTML = ''
    }
    
    // 检查API是否已加载
    if (typeof (window as any).BMap === 'undefined') {
      addDebugInfo('百度地图API未加载，开始加载...')
      status.value = '加载API中'
      
      await loadBaiduMapAPI()
    } else {
      addDebugInfo('百度地图API已存在')
    }
    
    // 创建地图
    status.value = '创建地图中'
    addDebugInfo('开始创建地图实例')
    
    const BMap = (window as any).BMap
    if (!BMap) {
      throw new Error('百度地图API加载失败')
    }
    
    map = new BMap.Map('test-map-container')
    addDebugInfo('地图实例创建成功')
    
    const point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 12)
    addDebugInfo('地图中心点和缩放设置成功')
    
    map.addControl(new BMap.NavigationControl())
    map.addControl(new BMap.ScaleControl())
    addDebugInfo('地图控件添加成功')
    
    status.value = '地图显示成功'
    addDebugInfo('地图测试完成')
    
  } catch (error) {
    status.value = '测试失败'
    errorMessage.value = error instanceof Error ? error.message : String(error)
    addDebugInfo('错误: ' + errorMessage.value)
  }
}

const loadBaiduMapAPI = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    addDebugInfo('开始加载百度地图API脚本')
    
    const callbackName = 'testBaiduMap_' + Date.now()
    ;(window as any)[callbackName] = () => {
      addDebugInfo('百度地图API加载成功')
      resolve()
      delete (window as any)[callbackName]
    }
    
    const script = document.createElement('script')
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=${callbackName}`
    script.onerror = (error) => {
      addDebugInfo('百度地图API加载失败: ' + error)
      reject(error)
    }
    
    document.head.appendChild(script)
    addDebugInfo('百度地图API脚本已添加到页面')
  })
}

const clearMap = () => {
  if (map) {
    try {
      map.clearOverlays()
      map = null
    } catch (error) {
      addDebugInfo('清除地图失败: ' + error)
    }
  }
  
  const container = document.getElementById('test-map-container')
  if (container) {
    container.innerHTML = ''
  }
  
  status.value = '地图已清除'
  addDebugInfo('地图已清除')
}
</script>

<style scoped>
.baidu-map-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.test-header h2 {
  margin: 0;
  color: #333;
}

.test-btn, .clear-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn {
  background: #1890ff;
  color: white;
}

.test-btn:hover {
  background: #40a9ff;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.clear-btn:hover {
  background: #e6e6e6;
}

.test-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.test-info p {
  margin: 5px 0;
  font-family: monospace;
}

.test-map-container {
  height: 400px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  background: #f9f9f9;
}

.debug-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.debug-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.debug-info pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 12px;
  color: #666;
  max-height: 300px;
  overflow-y: auto;
}
</style>
